<template>
  <div>
    <my-div class="create">
    <head></head>
    <my-text text="资金密码" day_color="rgba(70,120,245,1)" night_color="rgba(184,111,36,1)"  class="transfer-title"></my-text>    
    <div class="create-form">
      <div class="login-input">
        <input  type="password" :color='inputText.color' placeholder="资金密码" class="login-input-inner"  @blur="valid_pw(form.pw)" @input="check_pw(form.pw)" v-model="form.pw" />
        <text class="view_pw" style="font-size:28px;color:rgba(19,32,63,1)">{{pw_strength}}</text>
      </div>
      <div class="login-input">
        <input :type="input_type" :color='inputText.color' :placeholder="$t('wallet.r_pw')" class="login-input-inner" v-model="form.r_pw" />
        <div @click="toggle_type" class="toggle_type">
           <image class="view_pw" style="width:40px;height:20px;" src="root:img/create/biyan@2x.png"></image>
        </div>
      </div>
      
    </div>
    <div class="login-btn" @click="$refs.sure_pw.show = true" >
      <text style="color:#ffffff;font-size:24px;text-align: center;line-height:74px;
      ">修改</text>
    </div>
     <sure-password ref='sure_pw' @success="sure_success"></sure-password>
    </my-div>
  </div>
</template>

<script>
import SurePassword from '../../component/sure_password.vue';
export default {
  name: '',
  data() {
    return {
      input_type:'password',
      pw_strength:'',
      deviceHieght:WXEnvironment.deviceHeight,
      form:{
        name:'',
        pw:'',
        r_pw:''
      },
      check:false
    }
  },
  components: {SurePassword},
  created() {},
  methods: {
    valid_pw(){
      var pwdReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;//8到16位数字与字母组合
      if(!pwdReg.test(this.form.pw)) return this.toast('密码必须设置为8到16位数字与字母组合')
    },
    // 检测密码强度
    check_pw(val){
      var aLvTxt = ['','低','中','高'];
      var lv = 0;
      if(val.match(/[a-z]/g)){lv++;}
      if(val.match(/[0-9]/g)){lv++;}
      if(val.match(/(.[^a-z0-9])/g)){lv++;}
      if(val.length < 6){lv=0;}
      if(lv > 3){lv=3;}
      this.pw_strength = aLvTxt[lv]
    },
    sure_success(){
        const notify=weex.requireModule("notify")
        if(!this.form.pw) return this.toast(this.$t('common.null')+this.$t('wallet.pw'))
        this.valid_pw()
        if(!this.form.r_pw) return this.toast(this.$t('common.please')+this.$t('wallet.r_pw'))
        if(this.form.pw!==this.form.r_pw) return this.toast(this.$t('common.equal'))
        notify.send('funds_pw',{data:this.form.pw})
        this.current_user.funds_pw = this.form.pw
        this.set_current_user(this.current_user)
        this.toast('设置成功')
        this.navigator.back()
    },
     // 切换表单类型
    toggle_type(){
      if(this.input_type === 'text'){
        this.input_type = 'password'
      }else {
        this.input_type = 'text'
      }
    },

  }
}
</script>
<style scoped>
.create{
  width: 750px;
  flex: 1;
  /* position: absolute; */
  /* top: 0;
  bottom: 0;
  left: 0; */
}
.toggle_type{
  width: 40px;
  height: 80px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.head{
  margin-top: 80px;
  width: 690px;
  margin-left: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.login-dec{
  display: flex;
  flex-direction: row;
  margin-top: 34px;
  margin-left: 72px;
}

.create-form{
  margin-top: 40px;
}
.login-input{
  width: 690px;
  margin-left: 30px;
  height: 90px;
  border-bottom-width: 1px;
  border-bottom-color: rgba(233,233,233,1);
  border-bottom-style: solid;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.login-input-inner{
  width: 620px;
  font-size: 28px;
  height: 90px;
}
.login-btn{
  width: 690px;
  height: 80px;
  background-color: rgba(70,120,245,1);
  margin-top: 100px;
  border-radius: 10px;
  position: absolute;
  bottom: 140px;
  left: 30px;
}
.transfer-title{
  margin-top: 24px;
  margin-left: 30px;
  font-size: 48px;
  font-family: PingFang SC;
  margin-bottom: 104px;
}
</style>